<template>
    <div>
        <template>
            <!--页头组件-->
            <el-page-header style="background-color: #0095d7;color: #ffffff;line-height: 60px"
                            @back="goReturn" content="增加咨询页面"></el-page-header>
            <!--分割线-->
            <el-divider></el-divider>

            <el-card>
                <el-form :model="information" :rules="rules" ref="ruleForm">
                    <el-form-item prop="id" label="序号" label-width="80px">
                        <el-input v-model="information.id"></el-input>
                    </el-form-item>

                    <el-form-item prop="title" label="标题" label-width="80px">
                        <el-input v-model="information.title"></el-input>
                    </el-form-item>

                    <el-form-item label="图片" label-width="80px">
                        <el-upload
                                action="http://176.17.10.223:18082/information/upload"
                                name="picFile"
                                :limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                    :on-success="handleSuccess"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog
                                :visible.sync="dialogVisible"
                                title="预览"
                                width="800"
                                append-to-body
                        >
                            <img
                                    src="http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
                                    style="display: block; max-width: 100%; margin: 0 auto"
                            />
                        </el-dialog>
                        <el-dialog :visible.sync="dialogVisible">
                            <img  width="100%" :src="information.img" alt="" />
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="正文">
                        <el-tiptap
                                v-model="information.content"
                                :extensions="extensions"
                                placeholder="请输入内容 …"
                                width="50%"
                                height="200"
                                lang="zh"
                        />
                    </el-form-item>

<!--                    <el-form-item prop="content" label="正文" label-width="80px">-->
<!--                        <el-input v-model="information.content"></el-input>-->
<!--                    </el-form-item>-->

                    <el-form-item>
                        <el-button v-on:click="update('ruleForm')">修改</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="back('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-card>i

        </template>
    </div>
</template>

<script>
    import {
        Bold,
        BulletList, CodeBlock,
        Doc, Fullscreen,
        Heading,
        HorizontalRule,
        Italic,
        ListItem, OrderedList,
        Paragraph, Preview,
        Strike,
        Text, TextColor, TodoItem, TodoList,
        Underline
    } from "element-tiptap";
    export default {

        data(){
            return {
                extensions: [
                    new Doc(),
                    new Text(),
                    new Paragraph(),
                    new Heading({level: 6}),
                    new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
                    new Underline(), //下划线
                    new Italic(),
                    new Strike(),
                    new HorizontalRule(),
                    new ListItem(),
                    new BulletList(),
                    new OrderedList(),
                    new TodoItem(),
                    new TodoList(),
                    new Fullscreen(),
                    new Preview(),
                    new CodeBlock(),
                    new TextColor()
                ],
                id: this.$route.query.id,
                information:{
                    id:'',
                    title:'',
                    img:"",
                    content:""
                },

                dialogImageUrl:"",
            }
        },


        created(){
            this.getData()
        },
        methods:{
            // 记录选择的数据
            handleSelectionChange(vals) {
                this.multipleSelection = vals;
            },

            // 放大预览
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            //得到图片的文件名
            handleSuccess(res, file) {//res代表文件名称

                this.information.img = res;
                this.img = file;
                console.log(file);
                console.log(res);

            },
            //删除文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //当点击删除图片时方法会执行
                //file代表要删除的文件
                //file.response代表文件上传成功时 服务器响应的数据(文件名)
                console.log("file=========================" + file)
                console.log("文件名="+file.response);
                //http://176.17.10.223:8080/remove?name=xxx.jpg
                let url = "http://176.17.10.223:18082/information/remove"
                let data = 'name=' + file.response;
                this.axios.post(url,data).then((response) => {
                    console.log("服务器图片已经删除")
                })
            },

            getData(){
                console.log("id===================="+this.id)
                let url = 'http://176.17.10.223:18082/information/selectById'
                let data = 'id=' + this.id;
                console.log("data========================"+this.data)
                this.axios.post(url,data).then( (response) => {
                    //将得到的用户数据存储起来
                    this.information = response.data.data;
                    console.log(response.data.data)
                })
            },
            update(){
                let url = 'http://176.17.10.223:18082/information/updateById'
                let data = 'id=' + this.information.id +
                    '&title=' + this.information.title +
                    '&img=' + this.information.img +
                    '&content=' + this.information.content;
                console.log(this.information.img);
                this.axios.post(url,data).then( (response) => {
                    //将得到的用户数据存储起来
                    this.information = response.data.data;
                    this.$message({
                        message:'修改成功',
                        type:'success'
                    });
                    //提交之后返回到咨询管理页面
                    this.$router.push({path: '/admin/manage/news'});
                })

            },
            goReturn(){
                //返回上一页面
                history.back();

            },
            back(){
                //返回上一页面
                history.back();
                //删除图片
                //http://176.17.10.223:8080/remove?name=xxx.jpg
                let url = "http://176.17.10.223:18082/information/remove"
                let data = 'name=' + this.information.img;
                this.axios.post(url,data).then((response) => {
                    console.log("服务器图片已经删除")
                })
            }
        }
    }
</script>

<style scoped>

</style>